<!DOCTYPE html>
<html>
<head>
    <title>聚合码列表</title>
    <!--#include("../../common/common-link.html"){}-->
    <script src="${ctx}/assets/js/qrcode.min.js"></script>
    <style type="text/css">
        .table-panel .table-content .operation .btn {
            width: 89px;
        }

        .detail-div {
            padding: 10px 0;
        }

        .detail-row {
            text-align: center;
            height: 29px;
            line-height: 29px;
        }

        .detail-row .col {
            display: inline-block;
        }

        .detail-row .col-l {
            font-size: 16px;
            width: 90px;
            text-align: right;
        }

        .detail-row .col-r {
            font-size: 14px;
            color: #555;
            width: 210px;
            text-align: left;
        }

        .download-box .qr-table {
            width: 100%;
        }

        .download-box .qr-table tr th {
            width: 120px;
            text-align: center;
        }

        .download-box .qr-table tr td {
            text-align: center;
            height: 39px;
            line-height: 39px;
        }

        .download-box .qr-table a .download {
            color: #B2B2B2
        }

        .download-box .qr-table a .download:hover {
            color: #333333
        }

        #alipay-auth-qrcode {
            text-align: center;
            display: none
        }

        #alipay-auth-qrcode {
            text-align: center;
            display: none
        }

        #alipay-auth-qrcode .qrcode-img {
            padding: 30px;
        }

        .unbind-notice {
            color: red;
        }

        .bind-notice {
            color: green;
        }
    </style>
</head>
<body>
<div id="container-wrap" style="display:none;">
    <div class="table-panel">
        <div class="header">
            <h4 class="title">聚合码列表</h4>
            <div class="btns-group">
                <input type="button" class="btn button addBtn" @click="add" value="添加聚合码"/>
            </div>
        </div>
        <div class="content">
            <table class="table-content">
                <tr>
                    <th width="3%">序号</th>
                    <th width="20%">聚合码</th>
                    <th width="15%">编号</th>
                    <th width="25%">别名</th>
                    <th width="15%">绑定状态</th>
                    <th width="7%">可用状态</th>
                    <th width="20%">操作</th>
                </tr>
                <template v-if="paycodes&&paycodes.length>0">
                    <tr v-for="(paycode,index) in paycodes">
                        <td>{{index+1}}</td>
                        <td>
                            <div :class="'qr-code-'+index" style="padding-top: 3px;"></div>
                        </td>
                        <td>
                            {{paycode.value}}
                        </td>
                        <td>
                            <span v-if="paycode.alias">
                                {{paycode.alias}}
                            </span>
                            <span v-else>
                                 无
                            </span>
                        </td>
                        <td>
                            <span v-if="paycode.companyId" class="bind-notice">
                                已绑定
                            </span>
                            <span v-else class="unbind-notice">
                                未绑定
                            </span>
                        </td>
                        <td>
                            <span v-if="paycode.status">可用</span>
                            <span v-else>不可用</span>
                        </td>
                        <td class="operation">
                            <div v-if="paycode.companyId">
                                <div class="btn-group">
                                    <input class="btn btn-primary btn-sm" type="button" value="修&emsp;改"
                                           @click="modify(paycode.id)">
                                    <input class="btn btn-info btn-sm" type="button" value="下&emsp;载"
                                           @click="loadDownloadBox(index)">
                                </div>
                            </div>
                            <div v-else>
                                <div class="btn-group">
                                    <input class="btn btn-default btn-sm" type="button" value="绑&emsp;定"
                                           @click="bind(paycode)">
                                    <input class="btn btn-info btn-sm" type="button" value="下&emsp;载"
                                           @click="loadDownloadBox(index)">
                                </div>
                            </div>
                        </td>
                    </tr>
                </template>
                <template v-else>
                    <tr>
                        <td colspan="4">没有聚合码列表</td>
                    </tr>
                </template>
            </table>
        </div>
    </div>
    <!--<div class="download-box" style="display: none">-->
    <!--<table class="qr-table">-->
    <!--<tr>-->
    <!--<th>二维码边长(cm)</th>-->
    <!--<th>建议扫描距离(米)</th>-->
    <!--<th>下载链接</th>-->
    <!--</tr>-->
    <!--<tr v-for="(qrcode,i) in qrcodes">-->
    <!--<td>{{qrcode.length}}</td>-->
    <!--<td>{{qrcode.scanDistance}}</td>-->
    <!--<td>-->
    <!--<a href="javascript:void(0);" @click="downLoadQr(i)">-->
    <!--<span class="glyphicon glyphicon-save download"></span>-->
    <!--</a>-->
    <!--</td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--</div>-->

    <div class="download-box" style="display: none">
        <table class="qr-table">
            <tr>
                <th>规格</th>
                <th>下载链接</th>
            </tr>
            <tr>
                <td>长方形</td>
                <td>
                    <a href="javascript:void(0);" @click="downLoadQr(0)">
                        <span class="glyphicon glyphicon-save download"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td>正方形</td>
                <td>
                    <a href="javascript:void(0);" @click="downLoadQr(1)">
                        <span class="glyphicon glyphicon-save download"></span>
                    </a>
                </td>
            </tr>
        </table>
    </div>

    <div id="page"></div>
</div>
</body>
<script type="text/javascript">
    var data = {};
    var form = {};

    function initVue() {
        initQrMores();
        form.pageSize = 10;
        new Vue({
            el: "#container-wrap",
            data: data
        });
        Vue.nextTick(function () {
            $("#container-wrap").show();
        });
    };

    function request(callback) {
        var load_id = util.load();
        util.post({
            url: "paycodes",
            data: form,
            success: function (result) {
                $.extend(data, result);
                Vue.nextTick(function () {
                    encodeQrcode();
                    page();
                });
            },
            complete: function () {
                layer.close(load_id);
            }
        }, callback);
    };

    function add() {
        window.location.href = "paycode-add";
    };

    function bind(paycode) {
        console.log(paycode)

        layer.prompt({title: '请输入要绑定商户的ID', formType: 3}, function (text, index) {
            layer.close(index);

            var loading = layer.load(1, {
                shade: [0.5, '#fff'] //0.1透明度的白色背景
            });

            util.post({
                url: "bind",
                data: {
                    codeId: paycode.id,
                    companyId: text
                },
                success: function (result) {
                    layer.msg(result);
                    paycode.companyId = text
                },
                error: function (error) {
                    layer.msg(error);
                },
                complete: function () {
                    layer.close(loading);
                }
            })
        });
    }

    function modify(id) {
        window.location.href = "paycode-modify?id=" + id;
    };

    function page() {
        util.laypage({
            elem: 'page',
            count: data.totalRecord,
            limit: form.pageSize,
            curr: form.currentPageIndex,
            jump: function (obj, first) {
                form.currentPageIndex = obj.curr;
                if (!first) {
                    form.pageSize = obj.limit;
                    request();
                }
            }
        });
    };

    function encodeQrcode(i, url) {
        var paycodes = data.paycodes;
        for (var i in paycodes) {
            var url = paycodes[i].qrCode;
            var $qrimg = $(".qr-code-" + i);
            $qrimg.html("").qrcode({
                text: url,
                size: 49
            });
        }
    };

    function loadDownloadBox(i) {
        var $div = $(".download-box");
        currentQRIndex = i;
        layer.open({
            type: 1,
            shift: 2,
            closeBtn: 1,
            area: ['450px', '160px'],
            title: "下载",
            content: $div
        });
    };

    function downLoadQr(i) {
        var type;
        var typeName;
        if (i == 0) {
            type = "9_14"
            typeName = "长方形"
        } else if (i == 1) {
            type = "9_9"
            typeName = "正方形"
        }

        var paycodeData = data.paycodes[currentQRIndex];
        var paycode = paycodeData.qrCode;

        var _qrCode = util.base64Encode(paycode);

        console.log(_qrCode)

        var companyId = paycodeData.companyId
        if (companyId == null || companyId == "") {
            companyId = "未绑定";
        }

        var alias = paycodeData.alias
        if (alias == null || alias == "") {
            alias = "码" + (currentQRIndex + 1);
        }

        var rate = data.qrcodes[2].rate;

        var downLoadUrl = "downloadQR.jpg?paycode=" + _qrCode + "&type=" + type + "&rate=" + rate + "&name=" + companyId + "_" + alias + "_" + typeName;
        window.location.href = downLoadUrl;
        return;
    };

    function initQrMores() {
        var qrcodes = [];
        var qrcode = {};
        qrcode.length = "mini";
        qrcode.scanDistance = "0.5m";
        qrcode.rate = "3";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "small";
        qrcode.scanDistance = "0.5m";
        qrcode.rate = "4";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "8cm(建议下载)";
        qrcode.scanDistance = "0.5m";
        qrcode.rate = "6";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "12cm";
        qrcode.scanDistance = "0.8m";
        qrcode.rate = "8";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "15cm";
        qrcode.scanDistance = "1m";
        qrcode.rate = "10";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "30cm";
        qrcode.scanDistance = "1.5m";
        qrcode.rate = "20";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "50cm";
        qrcode.scanDistance = "2.5m";
        qrcode.rate = "30";
        qrcodes.push(qrcode);
        data.qrcodes = qrcodes;
    };

    function initialize() {
        layui.use(['laypage'], function () {
            laypage = layui.laypage;
            request(initVue);
        });
    };
</script>
</html>